<template>
  <el-drawer v-model="isShow" :destroy-on-close="true">
    <TreeFilter
      ref="treeFilterRef"
      :multiple="true"
      label="orgName"
      :title="$t('message.orgInfo.title')"
      :check-strictly="props.checkStrictly"
      :default-value="props.defaultValue"
      :request-api="props.requestApi"
      :data="props.data"
      :default-expand="props.defaultExpand"
      @change="handleCheckChange"
    >
    </TreeFilter>
    <template #footer>
      <div class="footer-buttons">
        <el-button @click="isShow = false">{{ $t("message.commonBtn.cancel") }}</el-button>
        <el-button type="primary" @click="handleSubmit">{{ $t("message.commonBtn.submit") }}</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts" name="OrgSelector">
import TreeFilter from "@/components/TreeFilter/index.vue";
const treeFilterRef = ref<InstanceType<typeof TreeFilter> | null>(null);
const isShow = ref(false);

// 接收父组件参数并设置默认值
interface OrgSelectorProps {
  requestApi?: (data?: any) => Promise<any>; // 请求分类数据的 api ==> 非必传
  data?: { [key: string]: any }[]; // 分类数据，如果有分类数据，则不会执行 api 请求 ==> 非必传
  defaultValue?: any; // 默认选中的值 ==> 非必传
  defaultExpand?: boolean; //是否展开
  checkStrictly?: boolean; //在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
}
const props = ref<OrgSelectorProps>({
  checkStrictly: false,
  defaultExpand: false
});

const orgSelector = (param: OrgSelectorProps) => {
  isShow.value = true;
  props.value = param;
};

const checkOrgIdList = ref<number[]>();
const handleCheckChange = (val: number[]) => {
  checkOrgIdList.value = val;
};

const emits = defineEmits(["returnData"]);
const handleSubmit = () => {
  emits("returnData", checkOrgIdList.value);
  isShow.value = false;
};
defineExpose({ orgSelector });
</script>
<style scoped lang="scss">
.footer-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}

/* 在这里添加您的自定义样式 */
.filter {
  width: 80%; /* 修改宽度为 300px */
}
</style>
